<template>
  <!-- 告警视频弹窗 -->
  <div class="alarm-video-popup">
    <div class="top">
      <div id="alarmVideoPopup"></div>
    </div>
    <div class="bottom mediumtablestyle">
      <el-table
        :data="newTableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        height="100%"
        border
      >
        <el-table-column prop="BDZMC" label="变电站名称" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="SBMC" label="设备名称" :show-overflow-tooltip="true" width="160"></el-table-column>
        <el-table-column prop="SBLX" label="设备类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SJLX" label="数据类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="SBJG" label="识别结果" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="IMAGE" label="图片" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <viewer :images="[scope.row.IMAGE]" @inited="inited(scope.row,$event)">
              <img :src="scope.row.IMAGE" alt srcset v-show="false" />
              <span class="iconfont iconpicture pitcure" @click="clickEvent(scope.row)"></span>
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="JCSJ" label="监测时间" :show-overflow-tooltip="true" width="160"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue, Prop } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  @Prop() videoData!: any[];
  @Prop() listData!: any[];
  // ------------------------视频相关-----------------------------
  formData = {
    indexCode: "",
    stationId: "",
  };
  PreviewOCX: any = null;
  // 1.videoData变化
  @Watch("videoData", {immediate: true,  deep: true })
  watchGetterStationState(newData, oldData) {
    this.changeFormData(newData);
  }
  changeFormData(data) {
    data.map((k, j) => {
      this.videoApi(k);
    });
  }
  // 2.输入：formData 输出：视频流
  videoApi(k) {
    (this as any).$services
      .getPreview({ data: k, dataType: "text" })
      .then((xml: any) => {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        if (
          ocx.startPreview(winindex, xml) === 0 &&
          ocx.setSelectWindow(winindex + 1) === -1
        ) {
          ocx.setSelectWindow(0);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // 3.初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "alarmVideoPopup",
      theme: "",
    }));
    return ocx;
  }
  // 4.token验证
  tokenCallEvent(reqID) {
    let data = { stationId: this.formData.stationId };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  // -------------------------表格相关-------------------------
  tableData = [
    {
      JCSJ: "2019-11-08 16:53:32",
      SBMC: "三",
      IMAGE:
        "http://10.192.34.107:10002/img/2019/1108/100435539/3f3125dab0a24fa98859bb37a820b9b8.jpg",
      SJLX: "仪表读数",
      SBJG: "31",
      BDZMC: "110kV商西变电站",
      SBLX: "仪表读数",
    },
  ];
  get newTableData() {
    let data = this.listData;
    // 新数据push进去 
    console.log(data);
    return data;
  }

  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  // 初始化图片放大
  inited(row, viewer) {
    row.viewer = viewer;
  }
  // 录制/图像点击事件
  clickEvent(row: any) {
    row.viewer.show();
  }

  mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(3);
    ocx.setCallBack();
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
  }
}
</script>

<style lang="scss" scoped>
.alarm-video-popup {
  width: 100%;
  height: 6rem;
  .top {
    width: 100%;
    height: 4rem;
    #alarmVideoPopup {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    width: 100%;
    height: 2rem;
  }
}
</style>